<template>
    <v-card flat title="开课数据">
      <v-btn
        icon="mdi-plus"
        @click="openDialog"
        style="margin-left: 20px"
      ></v-btn>
      <template v-slot:text>
          <div class="d-flex flex-row">
              <v-text-field
                  style="margin: 5px"
                  v-model="searchid"
                  label="课程号"
                  variant="outlined"
                  ></v-text-field>
                  <v-text-field
                  style="margin: 5px"
                  v-model="searchname"
                  label="教师号"
                  variant="outlined"
              ></v-text-field>
              <v-btn icon="mdi-magnify" style="margin: 5px" @click="searchS"></v-btn>
          </div>
      </template>
  
      <!-- 弹出对话框 -->
      <v-dialog v-model="newDialog" max-width="500px" persistent>
        <v-card>
          <v-card-title>填写班级信息</v-card-title>
          <v-card-text>
            <v-form>
              <!-- 在这里添加输入框 -->
              <v-text-field
                v-model="edited.semester"
                label="学期"
              ></v-text-field>
              <v-text-field
                v-model="edited.course_id"
                label="课程号"
              ></v-text-field>
              <v-text-field
                v-model="edited.class_time"
                label="上课时间"
              ></v-text-field>
              <v-text-field
                v-model="edited.staff_id"
                label="教师号"
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="saveChanges">保存</v-btn>
            <v-btn @click="closeDialog">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
  
      <v-dialog v-model="editDialog" max-width="500px" persistent>
        <v-card>
          <v-card-title>修改班级信息</v-card-title>
          <v-card-text>
            <v-form>
              <!-- 在这里添加输入框 -->
              <v-text-field
                v-model="change.semester"
                label="学期"
              ></v-text-field>
              <v-text-field
                v-model="change.course_id"
                label="课程号"
                readonly
              ></v-text-field>
              <v-text-field
                v-model="change.class_time"
                label="上课时间"
              ></v-text-field>
              <v-text-field
                v-model="change.staff_id"
                label="教师号"
                readonly
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="saveEdit">保存</v-btn>
            <v-btn @click="closeEditDialog">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
  
  
      <!-- 数据表格 -->
      <v-card>
        <v-card-item>
          <v-data-table
            :headers="teacherHeaders"
            :items="items"
            :search="search"
          >
            <template v-slot:item="{ item }">
              <tr>
                <td>{{ item.semester }}</td>
                <td>{{ item.course_id }}</td>
                <td>{{ item.course_name }}</td>
                <td>{{ item.class_time }}</td>
                <td>{{ item.staff_id }}</td>
                <td>{{ item.tname }}</td>
                <td>
                  <!-- 下拉菜单按钮 -->
                  <v-btn icon="mdi-pencil" style="margin: 10px" @click="openEditDialog(item)">
                  </v-btn>
                </td>
              </tr>
            </template>
          </v-data-table>
        </v-card-item>
      </v-card>
    </v-card>
    <v-dialog v-model="selecting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        {{ selectmsg }}
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="selecting = false">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  </template>
  <script>
  import axios from "axios";
  export default {
    created() {
        this.searchS();
      },
    data() {
      return {
        search: "",
        pageSelected: -1,
        searchid: "",
        searchname: "",
        refresh: true,
        newDialog: false,
        editDialog: false,
        teacherHeaders: [
          { key: "semester", align: "start", sortable: false, title: "学期" },
          { key: "course_id", title: "课程号" },
          { key: "course_name", title: "课程名" },
          { key: "class_time", title: "上课时间" },
          { key: "staff_id", title: "教师号" },
          { key: "tname", title: "教师名" },
          { key: "option", title: "选项", sortable: false },
        ],
        items: [],

      edited:{},
      change:{},
      };
    },
    methods: {
  
      async searchS() {
        // 处理搜索按钮点击事件
        console.log("Searching for:", this.searchid, this.searchname);
        let new_items = [];
        await axios({
          method: "get",
          url: "http://127.0.0.1:8000/admin/classs",
          params: {
            course_id: this.searchid,
            staff_id: this.searchname,
          },
        }).then((res) => {
          console.log("searchS:", res);
          new_items = res.data;
        });
        this.items = new_items.data;
        // 在这里可以添加搜索逻辑
      },
      showDropdown(item) {
        // 处理下拉菜单按钮点击事件
        console.log("Dropdown clicked for:", item);
        // 在这里可以添加下拉菜单的显示逻辑
      },
      openDialog() {
        // 初始化编辑的学生信息
        this.newDialog = true;
        this.edited = {
          semester: "",
          course_id: "",
          course_name: "",
          class_time: "",
          staff_id: "",
          tname: "",
        };
        this.dialog = true;
      },
      async saveChanges() {
        // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
        console.log("Saved changes:", this.edited);
        await axios({
          method: "get",
          url: "http://127.0.0.1:8000/admin/classs/add",
          params: {
            semester: this.edited.semester,
            course_id: this.edited.course_id,
            course_name: this.edited.course_name,
            class_time: this.edited.class_time,
            staff_id: this.edited.staff_id,
            tname: this.edited.tname
          },
        }).then((res) => {
          console.log("addT:", res.data);
        });
        // 关闭对话框
        this.newDialog = false;
        this.searchS();
      },
      closeDialog() {
        // 关闭对话框
        this.newDialog = false;
      },
      openEditDialog(item) {
        // 初始化编辑的学生信息
        this.editDialog = true;
        this.change = {
          semester: item.semester,
          course_id: item.course_id,
          course_name: item.course_name,
          class_time: item.class_time,
          staff_id: item.staff_id,
          tname: item.tname
        };
        this.dialog = true;
      },
      closeEditDialog() {
        // 关闭对话框
        this.editDialog = false;
      },
      async saveEdit() {
        // 处理保存逻辑，可以将编辑后的学生信息保存到数据中
        console.log("Saved changes:", this.change);
        await axios({
          method: "get",
          url: "http://127.0.0.1:8000/admin/classs/update",
          params: {
            semester: this.change.semester,
            course_id: this.change.course_id,
            course_name: this.change.course_name,
            class_time: this.change.class_time,
            staff_id: this.change.staff_id,
            tname: this.change.tname
          },
        }).then((res) => {
          console.log("editT:", res.data);
        });
        // 关闭对话框
        this.editDialog = false;
        this.searchS();
      },
    },
  };
  </script>
  